<template>
  <div>
    <div class="info-box">
        <p><span>用户昵称：</span><input type="text" v-model="infos.nickname"></p>
        <p><span>手机号码：</span><input type="text" v-model="infos.phoneNumber"></p>
        <p><span>收货地址：</span><input type="text" v-model="infos.addres"></p>
        <p><button @click="save" class="save">保存</button></p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import axios from 'axios'
import { ElNotification } from 'element-plus'
export default {
  name: '',
  setup() {
    const infos = ref({
        nickname:'西里',
        phoneNumber:'18223784454',
        addres:'重庆市巴南区'
    })
    
    //获取数据
    const data = ref()
    const getData = ()=>{
        let token = sessionStorage.token
        axios.get('http://localhost:3000/userlist?username='+token).then(res=>{
            res.data.forEach(element => {
                data.value = element
                infos.value.nickname = element.nickname
                infos.value.phoneNumber = element.phoneNumber
                infos.value.addres=element.addres
            });
        })
    }
    getData()
    
    //保存数据
    const save = ()=>{
        axios.patch('http://localhost:3000/userlist/'+data.value.id,infos.value).then(res=>{
            ElNotification({
                title: 'Success',
                message: '已保存',
                type: 'success',
            })
        })
    }


    return {
      infos,save
    }

  },
}

</script>
<style scoped lang='scss'>
  .info-box{
    p{
        input{
            border: none;
            outline: none;
            border-bottom: 1px black solid;
        }
    }
    .save{
        background-color: black;
        color: white;
        border: none;
        width: 100px;
        padding: 5px;
        text-align: center;
    }
  }  
</style>